<template>
    <div class="entry">
      <el-container>
        <el-header class="c_333 b_FS-26 font-regular">Vue-Easy-Coding
          <i class="el-icon-edit c_white"></i>
          <i class="el-icon-share c_white"></i>
          <i class="el-icon-delete c_white"></i>
        </el-header>
        <el-container>
          <el-aside width="200px">Aside</el-aside>
          <el-main>Main</el-main>
          <el-aside width="200px">Aside</el-aside>
        </el-container>
      </el-container>
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-row>
    </div>
</template>
<script type="text/babel">
    export default{
        data(){
            return{

            }
        },
        components:{

        },
        mounted(){},
        methods:{}
    }
</script>
<style lang="less">
  @themeColor: #ffd100; // 主色调
  @lightColor: #fffbeb; // 副色调
  @gardientColor: #f29600 ;
  @contentBg: #fff ;
  .theme-bg{
    background-color: @themeColor;
  }
  .buildBg( @color) {
    background-color: @color;
  }
  .entry{
    .el-header{
      .buildBg(@themeColor);
      .text-left ;
      width: 100vw ;
      height: 64px ;
      line-height: 64px ;
      .title{

      }
    }
    .el-aside{
      .buildBg(@lightColor);
      .text-center ;
      height: 100vh ;
    }
    .el-main{
      .buildBg(@contentBg) ;
    }

  }
</style>

